{extend name="common:base" /}

{block name="title"}画廊 - {$config.site_name}{/block}

{block name="css"}
<link rel="stylesheet" href="/static/viewerjs/viewer.min.css">
{/block}

{block name="main"}
<style>
    .image-item {
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-bottom: .5rem;
        height: 160px;
    }
    .image-item .mdui-grid-tile {
        height: 100%;
    }
    .image-item .mdui-grid-tile .img {
        height: 100%;
        object-fit: cover;
        background-size: cover;
        background-position: center;
    }
</style>

<div class="mdui-container">
  <main>
    <div id="images-box" class="mdui-row-xs-2 mdui-row-sm-4 mdui-row-md-5 mdui-row-lg-6 mdui-row-xl-7 mdui-grid-list">
      {foreach ($images as $index => $image)}
      <div class="mdui-col image-item">
        <div class="mdui-grid-tile">
          <div class="img" style="background-image: url('{$image.url}')"></div>
          <img src="{$image.url}" style="display: none">
          <div class="mdui-grid-tile-actions mdui-grid-tile-actions-top">
            <div class="mdui-grid-tile-text">
              <div class="mdui-grid-tile-title">{$image.date}</div>
            </div>
          </div>
        </div>
      </div>
      {/foreach}
    </div>
    <button class="mdui-btn mdui-m-t-2 mdui-center mdui-ripple" id="more">查看更多</button>
  </main>
</div>
{/block}

{block name="js"}
<script src="/static/viewerjs/viewer.min.js"></script>
<script src="/static/app/js/jquery-viewer-1.2.0.js"></script>
<script>
  var page = 2;
  var limit = 30;
  var loading = false;
  var $box = $('#images-box');
  var $more = $("#more");
  var $viewer = $box.viewer({zIndex: 999999999});
  $box.on('click', '.image-item .img', function () {
    $viewer.data('viewer').view($(this).closest('.image-item').index());
  });
  $more.click(function () {
    if (loading) return;
    loading = true;
    $more.attr('disabled', true).text("加载中...");
    app.ajax("", {page: page, limit: limit}, function (response) {
      if (response.code) {
        var data = response.data;
        if (data.length === 0) {
          $more.text("我也是有底线的~");
        } else {
          var html = '';
          for (var key in data) {
            html += "<div class=\"mdui-col image-item\">\n" +
              "        <div class=\"mdui-grid-tile\">\n" +
              "          <div class=\"img\" style=\"background-image: url('"+ data[key].url + "')\"></div>\n" +
              "          <img src=\""+ data[key].url + "\" style=\"display: none\">\n" +
              "          <div class=\"mdui-grid-tile-actions mdui-grid-tile-actions-top\">\n" +
              "            <div class=\"mdui-grid-tile-text\">\n" +
              "              <div class=\"mdui-grid-tile-title\">"+ data[key].date + "</div>\n" +
              "            </div>\n" +
              "          </div>\n" +
              "        </div>\n" +
              "      </div>"
          }
          $('#images-box').append(html);
          $viewer.data('viewer').update();
          loading = false;
          if (data.length < limit) {
            $more.text("我也是有底线的~");
          } else {
            $more.attr('disabled', false).text("查看更多");
            page++;
          }
        }
      }
    });
  });
</script>
{/block}
